<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app> 

      <v-divider></v-divider>

      <!-- 隐藏按钮 -->
      <v-list-item>
        <v-btn icon @click.stop="drawer = !drawer">
          <v-icon>mdi-menu</v-icon>
        </v-btn>
        Admin Panel
      </v-list-item>
      
      <!-- 修改后的导航菜单项 -->
      <v-list dense nav>
        <v-list-item
          v-for="item in menuItems"
          :key="item.title"
          :to="item.path"
          :prepend-icon="item.icon"
          :title="item.title"
          :active="$route.path === item.path"
          active-color="primary"
        ></v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- 添加一个显示菜单的按钮 -->
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Admin Dashboard</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'DefaultLayout',
  data() {
    return {
      drawer: true, // 添加 drawer 状态
      menuItems: [
        { title: 'Dashboard', icon: 'mdi-view-dashboard', path: '/' },
        { title: 'Users', icon: 'mdi-account-group', path: '/users' },
        { title: 'Products', icon: 'mdi-package-variant-closed', path: '/products' },
        { title: 'Orders', icon: 'mdi-cart', path: '/orders' },
        { title: 'Settings', icon: 'mdi-cog', path: '/settings' },
      ],
    }
  },
}
</script>